<template>
  <view
    class="sex flex flex-middle flex-center"
    :style="'background:' + background"
    v-if="sex"
  >
    <u-icon size="10" color="#fff" :name="name" />
  </view>
</template>

<script>
export default {
  props: {
    sex: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    background() {
      return this.sex == 1 ? "#53a2ff" : "#f80191";
    },
    name() {
      return this.sex == 1 ? "man" : "woman";
    },
  },
};
</script>

<style scoped lang="scss">
.sex {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
</style>